<div class="content">
  <div class="default-header"><h1>Servers</h1></div>
  <div class="default-content">
    <app-server-discovery></app-server-discovery>

    <div class="mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.id }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <a
              *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'"
              [routerLink]="['/server', row.id, 'projects']"
              class="table-link"
              >{{ row.name }}</a
            >
            <span
              *ngIf="getServerStatus(row) != 'running' && row.location !== 'remote' && row.location !== 'bundled'"
              >{{ row.name }}</span
            >
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="location">
          <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.location }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="ip">
          <mat-header-cell *matHeaderCellDef> Host </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.host }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="port">
          <mat-header-cell *matHeaderCellDef> Port </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.port }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell *matCellDef="let row" style="text-align: right">
            <button
              mat-icon-button
              matTooltip="Go to projects"
              matTooltipClass="custom-tooltip"
              (click)="openProjects(row)"
              *ngIf="getServerStatus(row) === 'running' || row.location === 'remote' || row.location === 'bundled'"
            >
              <mat-icon aria-label="Go to projects">arrow_forward</mat-icon>
            </button>

            <button
              mat-icon-button
              matTooltip="Start server"
              matTooltipClass="custom-tooltip"
              (click)="startServer(row)"
              *ngIf="row.location === 'local' && getServerStatus(row) === 'stopped'"
            >
              <mat-icon aria-label="Start server">play_arrow</mat-icon>
            </button>

            <button
              mat-icon-button
              matTooltip="Stop server"
              matTooltipClass="custom-tooltip"
              (click)="stopServer(row)"
              *ngIf="row.location === 'local' && getServerStatus(row) === 'running'"
            >
              <mat-icon aria-label="Stop server">stop</mat-icon>
            </button>

            <mat-spinner
              [diameter]="24"
              *ngIf="row.location === 'local' && getServerStatus(row) === 'starting'"
            ></mat-spinner>

            <button
              mat-icon-button
              matTooltip="Remove server"
              matTooltipClass="custom-tooltip"
              (click)="deleteServer(row)"
            >
              <mat-icon aria-label="Remove server">delete</mat-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
    </div>

    <div class="buttons-bar">
      <button *ngIf="isElectronApp" mat-raised-button class="button" (click)="startLocalServer()">
        Start local server
      </button>
      <button mat-raised-button class="button" color="primary" (click)="createModal()">Add server</button>
    </div>
  </div>
</div>
